<!DOCTYPE html>

<html class="no-js">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title></title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://cdn.staticfile.org/axios/0.19.0-beta.1/axios.js"></script>
    <script src="https://cdn.staticfile.org/vue/2.5.17/vue.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.13.0/theme-chalk/index.css" />
    <script src="https://cdn.staticfile.org/element-ui/2.13.0/index.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/animate.css/3.7.0/animate.min.css" />
    <link rel="stylesheet" href="../../../lib/index.css" />
    <script src="../../../lib/cvue.js"></script>

</head>

<body>
    <div id="app">
        <cvue-cards :option="option" :data="data" @row-click="tip" @row-add="tip">
            <template slot="menu" slot-scope="scope">
                <span style="color:red" @click.stop="tip(scope.row,scope.index)">操作1</span>
                <div @click.stop="tip(scope.row,scope.index)">操作2</div>
            </template>
        </cvue-cards>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                option: {
                    // addBtn:false,
                    props: {
                        img: 'img',
                        title: 'title',
                        info: 'text',
                    }
                },
                data: [{
                    title: 'Alipay',
                    text: '在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的,在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的',
                    img: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png'
                }, {
                    title: 'Angular',
                    text: '在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的,在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的',
                    img: 'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png'
                }, {
                    title: 'Ant Design',
                    text: '在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的,在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的',
                    img: 'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png'
                }, {
                    title: 'Ant Design Pro',
                    text: '在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的,在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的',
                    img: 'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png'
                }, {
                    title: 'Bootstrap',
                    text: '在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的,在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的',
                    img: 'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png'
                }, {
                    title: 'React',
                    text: '在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的,在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的',
                    img: 'https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png'
                }, {
                    title: 'Vue',
                    text: '在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的,在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的',
                    img: 'https://gw.alipayobjects.com/zos/rmsportal/ComBAopevLwENQdKWiIn.png'
                }, {
                    title: 'Webpack',
                    text: '在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的,在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的',
                    img: 'https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png'
                }]
            }
        },
        methods: {
            tip(row, index) {
                this.$message.success('查看控制台')
                console.log(row, index)
            }
        }
    })
</script>

</html>